<template>
  <view class="profit">
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar title="收益"
      left-icon="left" @clickLeft="$ui.back()" right-text="立即出售" @clickRight="is_show_c = true" />
    <view class="top-box">
      <view class="flex-row-between-center">
        <view class="top-box-first">
          <view class="firt-tit">升值收益</view>
          <view class="second-tit">{{ assets.zzReward || 0 }}</view>
        </view>
        <view class="top-box-first">
          <view class="firt-tit">推荐收益</view>
          <view class="second-tit">{{ assets.profit_recom || 0 }}</view>
        </view>
        <view class="top-box-first">
          <view class="firt-tit">团队收益</view>
          <view class="second-tit">{{ assets.profit_team || 0 }}</view>
        </view>
      </view>
      <view class="flex-row-between-center mt">
        <view class="top-box-first">
          <view class="firt-tit">昨日收益</view>
          <view class="second-tit">{{ assets.yesterdayReward || 0 }}</view>
        </view>
        <view class="top-box-first">
          <view class="firt-tit">今日收益</view>
          <view class="second-tit">{{ assets.todayReward || 0 }}</view>
        </view>
        <view class="top-box-first">
          <view class="firt-tit">累计收益</view>
          <view class="second-tit">{{ assets.allReward || 0 }}</view>
        </view>
      </view>
    </view>
    <view class="tabs flex-row-between-center">
      <view @click="index = 1" :class="['tab', index === 1 ? 'active-tab' : '']">
        <text>升值收益</text>
        <view :class="[index === 1 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 2" :class="['tab', index === 2 ? 'active-tab' : '']">
        <text>推荐收益</text>
        <view :class="[index === 2 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 3" :class="['tab', index === 3 ? 'active-tab' : '']">
        <text>团队收益</text>
        <view :class="[index === 3 ? 'slider' : 'none']"></view>
      </view>
    </view>
    <view class="tab-content">
      <template v-if="index == 1">
        <view class="cell flex-row-between-center" v-for="(item,index) in list" :key="index">
          <view class="cell-left flex-col-between">
            <view class="cell-text">{{item.message}}</view>
            <view class="cell-time">{{item.time}}</view>
          </view>
          <view class="cell-right">{{item.sign == 1?'+':'-'}}{{item.num}}</view>
        </view>

      </template>
      <template v-if="index == 2">
        <view class="cell flex-row-between-center" v-for="(item,index) in list" :key="index">
          <view class="cell-left flex-col-between">
            <view class="cell-text">{{item.message}}</view>
            <view class="cell-time">{{item.time}}</view>
          </view>
          <view class="cell-right">{{item.sign == 1?'+':'-'}}{{item.num}}</view>
        </view>
      </template>
      <template v-if="index == 3">
        <view class="cell flex-row-between-center" v-for="(item,index) in list" :key="index">
          <view class="cell-left flex-col-between">
            <view class="cell-text">{{item.message}}</view>
            <view class="cell-time">{{item.time}}</view>
          </view>
          <view class="cell-right">{{item.sign == 1?'+':'-'}}{{item.num}}</view>
        </view>
      </template>
    </view>
    <u-popup :show="is_show_c" mode="center" @close="close" closeOnClickOverlay>
      <div class="conversion-pup conversion-pup-nl conversion-pup-cw">
        <div class="conversion-title font-family-hkxzyt">
          果品兑换
          <!-- <img src="@/assets/mine/gem-title.png" alt="" class="conversion-title-img"> -->
        </div>
        <div class="flex-between-center conversion-pup-con conversion-pup-con-cw div-sizing">
          <view class="input_box u-flex u-ali-center u-ju-between" @click="payTimesShow = true">
            选择果品
            <u-picker @confirm="confirm" :show="payTimesShow" :columns="purchase" @cancel="payTimesShow = false">
            </u-picker>
            <input class="input_in" type="text" v-model="name" placeholder="-请选择果品-">
          </view>
          <view class="input_box u-flex u-ali-center u-ju-between">
            出售价格
            <input class="input_in" type="text" v-model="price" placeholder="-请输入出售的价格-">
          </view>
          <view class="input_box u-flex u-ali-center u-ju-between">
            出售数量
            <input class="input_in" type="text" v-model="number" placeholder="-请输入出售的数量-">
          </view>
          <view class="input_box u-flex u-ali-center u-ju-between">
            支付密码
            <input class="input_in" type="text" v-model="password" placeholder="-请输入支付密码-">
          </view>
          <u-button style="margin-top: 50rpx;" @click="submitBtn()">
            确认兑换
          </u-button>
        </div>
      </div>
    </u-popup>
  </view>
</template>

<script>
  import {
    getRewardIndex,
    putExchange,
    getExchangeProfit
  } from '../../api/cardService/profit.js'
  import md5 from '../../utils/md5.js'
  export default {
    data() {
      return {
        index: 1,
        type: 8,
        is_show_c: false,
        list: [],
        payTimesShow: false,
        assets: {},
        page: 1,
        price: '',
        name: '',
        purchase: [],
        number: '',
        password: '',
        purchase_id: '',
        udlist: []
      }
    },
    watch: {
      index(val) {
        switch (val) {
          case 3:
            this.type = 5
            break
          case 1:
            this.type = 8
            break
          case 2:
            this.type = 4
            break
        }
        this.index = val
        this.getList()
        if (val === 1) {
          console.log(1);
        } else if (val === 2) {
          console.log(2);
        } else if (val === 3) {
          console.log(3);
        }
      }
    },
    methods: {
      close(){
        console.log(123123);
        this.is_show_c = false
      },
      confirm(val) {
        console.log(val.indexs[0] + 1, 123);
        this.purchase_id = val.indexs[0] + 1
        this.name = this.purchase[0][val.indexs[0]]
        this.payTimesShow = false
      },
      // 确认兑换
      submitBtn() {
        putExchange({
          password: md5.hex_md5(this.password),
          num: this.number,
          price: this.price,
          purchase_id: this.purchase_id
        }).then(res => {
          if(res.code == 1){
            this.is_show_c = false
          }
          this.$ui.toast(res.msg)
        })
      },
      getList(type = 'push') {
        this.$ui.loading('加载中')
        getRewardIndex({
          page: this.page,
          type: this.type
        }).then(res => {
          if (res.code == 1) {
            uni.hideLoading()
            this.assets = res.data.assets
            if (type == 'push') {
              this.list = res.data.list
            } else {
              this.list = [...res.data.list, ...this.list]
            }
          }
        })
      }
    },
    onReachBottom() {
      this.page++
      this.getList('onReachBottom')
    },
    onLoad() {
      this.getList()
      getExchangeProfit().then(res => {
        if (res.code == 1) {
          this.udlist = res.data.purchase
          this.udlist.forEach((item, index) => {
            this.purchase.push(item.name)
          })
          this.purchase = [this.purchase]
          console.log(this.purchase);
        }
      })
    }
  }
</script>

<style lang="less" scoped>
  .input_box {
    border-bottom: 1rpx solid rgba(40, 40, 40, 0.55);
  }

  .profit {
    .top-box {
      height: 276rpx;
      background: #FFFFFF;
      box-shadow: 4rpx 1rpx 20rpx 1rpx rgba(0, 0, 0, 0.09);
      border-radius: 0 0 35rpx 35rpx;
      margin-bottom: 61rpx;
      // box-sizing: border-box;
      padding: 45rpx 70rpx 20rpx 70rpx;

      .top-box-first {
        text-align: center;

        .firt-tit {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }

        .second-tit {
          font-size: 36rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ECD489;
          margin-top: 20rpx;
        }
      }

      .mt {
        margin-top: 47rpx;
      }
    }

    .tabs {
      height: 53rpx;
      padding: 0 65rpx;
      box-sizing: border-box;

      .tab {
        height: 53rpx;
        line-height: 53rpx;
        text-align: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        position: relative;
      }

      .active-tab {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #CFB35A;
      }

      .slider {
        width: 60rpx;
        height: 3rpx;
        background: #D2B17C;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
      }

      .none {
        display: none;
      }
    }

    .tab-content {
      margin-top: 43rpx;
      box-sizing: border-box;
      padding: 0 65rpx;

      .cell {
        height: 134rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        box-sizing: border-box;
        padding: 28rpx 29rpx 28rpx 25rpx;
        margin-bottom: 20rpx;

        .cell-left {
          height: 100%;

          .cell-text {
            font-size: 25rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
          }

          .cell-time {
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
          }
        }

        .cell-right {
          font-size: 34rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ECD489;
        }

        .cell-right-active {
          color: #DA5959;
        }
      }

      view:last-child {
        margin-bottom: 0;
      }
    }
  }

  .conversion-pup {
    width: 690rpx;
    height: 298rpx;
    position: relative;
  }

  .conversion-pup-con {
    width: 100%;
    padding: 42rpx 48rpx;
    flex-direction: column;
  }

  .conversion-title {
    font-size: 34rpx;
    font-weight: bold;
    padding: 30rpx 0;
    text-align: center;

    .conversion-title-img {
      width: auto;
      height: 38rpx;
      margin: 0 auto;
    }
  }

  .conversion-pup-cw {
    height: 742rpx;
    position: relative;
    background: #ffffff;

    // border-radius: 40rpx;
    .conversion-title {
      padding: 60rpx 0 40rpx;
      font-size: 44rpx;
      font-weight: normal;
    }

    .conversion-pup-con-cw {
      padding: 0 40rpx;
      flex-direction: column;

      .conversion-title-img {
        width: 185rpx;
        height: 42rpx;
        margin: 60rpx auto 20rpx;
      }

      .van-form {
        width: 100%;
      }

      .van-cell {
        min-height: 0;
        border-radius: 0;
        border-bottom: 2rpx solid rgba(#282828, 0.05);
        margin-top: 0;
        padding: 20rpx 0;
        font-size: 28rpx;

        .van-field__control {}
      }

      .van-cell-border {
        border: none;
        padding: 0;
      }

      .leven-img {
        width: 54rpx;
        height: 36rpx;
        margin-right: 10rpx;
      }

      .conversion-bl {
        margin-top: 12rpx;
        font-size: 24rpx;

        span {
          margin-right: 10rpx;
        }
      }

      .vant-btn {
        width: 100%;
        padding: 0;
        margin-top: 60rpx;

        .nl-red {
          font-size: 32rpx;
          margin-left: 10rpx;
          // background: #248FEE;
        }

        .van-button {
          width: 100%;
          font-size: 28rpx;
          box-sizing: border-box;
          border-radius: 40rpx;
          // background: #282828;
        }
      }
    }
  }
</style>
